<template>
  <div ref="canvas"></div>
</template>

<script lang="ts" setup>
import * as THREE from 'three';
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";
import {ref, onMounted, h} from "vue";
import {AxesHelper} from "three";

// 画布
const canvas = ref<any>('');
// 场景
const scene = new THREE.Scene();
// 三维样条曲线 CatmullRomCurve3
// 三维向量Vector3创建一组顶点坐标
const arr = [
  new THREE.Vector3(-50, 20, 90),
  new THREE.Vector3(-10, 40, 40),
  new THREE.Vector3(10, 30, 5),
  new THREE.Vector3(60, -60, 0),
  new THREE.Vector3(70, 0, 80)
]
// 三维样条曲线
const curve = new THREE.CatmullRomCurve3(arr);

// // 二维向量Vector2创建一组顶点坐标
// const arr = [
//   new THREE.Vector2(-100, 0),
//   new THREE.Vector2(0, 30),
//   new THREE.Vector2(100, 0),
// ];
// // 二维样条曲线
// const curve = new THREE.SplineCurve(arr);

// 从三维样条曲线上获取点 - divisions: 获取多少个顶点
const points = curve.getPoints(150);
// 几何体
const geometry = new THREE.BufferGeometry();
geometry.setFromPoints(points);
// 材质
const material = new THREE.LineBasicMaterial({
  color: 0x00ffff,
  side: THREE.DoubleSide,
})
// 网格模型Mesh
const line = new THREE.Line(geometry, material);
scene.add(line);
// 环境光
const ambient = new THREE.AmbientLight(0xffffff, 0.8);
scene.add(ambient);
// 辅助坐标系
const helper = new AxesHelper(200);
scene.add(helper);
// 相机
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 2000);
camera.position.set(200, 200, 200);
camera.lookAt(line.position);
// 渲染器
const renderer = new THREE.WebGLRenderer({
  antialias: true,
});
renderer.setClearColor(0xffffff);
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(window.innerWidth, window.innerHeight);
// 渲染函数
const render = () => {
  renderer.render(scene, camera);
  requestAnimationFrame(render);
};
// 相机控件
const orbitControl = new OrbitControls(camera, renderer.domElement);
orbitControl.update();

onMounted(() => {
  canvas.value.appendChild(renderer.domElement);
  render();
});
</script>
